<!DOCTYPE html>
<html lang="en">
  <head>
    <title>ESB Chat Sample</title>
	<link rel="stylesheet" href="jquery.mobile-1.3.0.min.css" />
	<style>
	
			.ui-icon-loading {
			background: url(http://code.jquery.com/mobile/1.1.0-rc.1/images/ajax-loader.png);
			background-size: 46px 46px;
			width:46px;
			height:46px;
			-webkit-transform: rotate(360deg);
			-webkit-animation-name: spin;
			-webkit-animation-duration: 1s;
			-webkit-animation-iteration-count:  infinite;
			-webkit-animation-timing-function: linear;
		}
		@-webkit-keyframes spin {
			from {-webkit-transform: rotate(0deg);}
			to {-webkit-transform: rotate(360deg);}
		}
	</style>
	<script src="Scripts/jquery-1.8.2.min.js"></script>
	<script src="Scripts/jquery.mobile-1.3.0.min.js"></script>
	<link rel="stylesheet" href="font.css">
    <script src="Scripts/psb.js?version=2.0" type="text/javascript"></script>
    <script src="Scripts/chat.js?version=2.0" type="text/javascript"></script>
    <style>
      .message
      {
        padding: 5px 5px 5px 5px;
      }
      .username
      {
        font-weight: strong;
        color: #0f0;
      }
      .msgContainerDiv
      {
        overflow-y: scroll;
        height: 250px;
      }
    </style>
  </head> 
 
  <body> 
 
    <div data-role="page" id="loginPage" data-role="page" data-theme="a">
        <div data-role="header" data-backbtn="false">
            <h1>ESB Chat</h1>
        </div>
 
        <div data-role="content">
        <div data-role="fieldcontain">
            <label for="userNameInput"><strong>UserName:</strong></label>
            <input type="text" name="userNameInput" id="userNameInput" value=""  />
            <button id="userNameButton">Ok</button>
        </div>
        </div>
    </div>
 
    <div data-role="page" id="chatPage" data-role="page" data-theme="a">
 
        <div data-role="header" data-backbtn="false">
            <h1>ESB Chat</h1>
        </div>
 
        <div data-role="content">
        <div id="messageBox" name="messageBox" class="msgContainerDiv" ></div>
        <label for="inputBox"><strong>Message:</strong></label>
        <textarea name="inputBox" id="inputBox"></textarea>
 
        <fieldset class="ui-grid-a">
            <div class="ui-block-a"><button id="endChatButton" data-theme="a" name="endChatButton" onclick="endChat($(this))">End Chat</input></div>
            <div class="ui-block-b"><button data-theme="a" id="inputButton" onclick="sendInput()" name="inputButton">Send</input>
        </fieldset>
        </div>
    </div>
 
  </body>
</html>